<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #cs {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <canvas id="cs" width="480" height="500"></canvas>
        <script>
            let cs = document.getElementById("cs");
            let context = cs.getContext("2d");
            context.translate(75, 75);
            //头部
            context.beginPath();
            context.fillStyle = "#53CD36";
            context.arc(140, 100, 100, 0, Math.PI, true);
            context.fill();
            setTimeout(load1, 700);
            //眼睛
            function load1() {
                context.beginPath();
                for (let i = 1; i <= 2; i++) {
                    context.fillStyle = "black";
                    context.arc(22 + 80 * i, 50, 12, 0, Math.PI * 2, true);
                }
                context.fill();
                setTimeout(load2, 700);
            }
            //身体
            function load2() {
                context.beginPath();
                context.strokeStyle = "#53CD36";
                context.lineWidth = 200;
                context.moveTo(140, 300);
                context.lineTo(140, 120);
                context.stroke();
                //身体下角
                
                for (let i = 0; i < 2; i++) {
                    context.beginPath();
                    context.fillStyle = "#53CD36";
                    context.arc(55 + i * 170, 300, 15, 0, Math.PI, false);
                    context.fill();
                }
                context.beginPath();
                context.lineWidth = 16;
                context.moveTo(55, 307);
                context.lineTo(225, 307);
                context.stroke();
                setTimeout(load3, 700);
            }
            //手
            function load3() {
                context.beginPath();
                for (let j = 0; j <= 1; j++) {
                    context.lineCap = "round";
                    context.lineWidth = 45;
                    context.moveTo(280 * j, 240);
                    context.lineTo(280 * j, 140);
                    context.stroke();
                }
                setTimeout(load4, 700);
            }
            //脚
            function load4() {
                for (let j = 0; j <= 1; j++) {
                    context.lineWidth = 45;
                    context.moveTo(90 + 100 * j, 380);
                    context.lineTo(90 + 100 * j, 310);
                    context.stroke();
                }
                setTimeout(load5, 700);
            }
            //耳朵
            function load5() {
                for (let j = 0; j <= 1; j++) {
                    context.lineWidth = 8;
                    context.moveTo(100 + 80 * j, 15);
                    context.lineTo(80 + 120 * j, -20);
                    context.stroke();
                }
                setTimeout(blink, 700);
            }
        </script>
    </body>
</html>
